<template>
    <el-form
        ref="registerForm"
        :model="registerUser"
        :rules="registerRules"
        label-width="100px"
        class="registerForm sign-up-form"
    >
        <el-form-item
            label="账号"
            prop="account"
        >
            <el-input
                v-model="registerUser.account"
                placeholder="请输入账号"
                autocomplete="off"
            />
        </el-form-item>

        <el-form-item
            label="公司名"
            prop="companyName"
        >
            <el-input
                v-model="registerUser.companyName"
                placeholder="请输入公司名"
                autocomplete="off"
            />
        </el-form-item>

        <el-form-item
            label="密码"
            prop="password"
        >
            <el-input
                v-model="registerUser.password"
                type="password"
                placeholder="请输入密码"
                autocomplete="off"
            />
        </el-form-item>

        <el-form-item
            label="确认密码"
            prop="password2"
        >
            <el-input
                v-model="registerUser.password2"
                type="password"
                placeholder="请再次输入密码"
                autocomplete="off"
            />
        </el-form-item>

        <el-form-item>
            <el-button
                @click="handleRegister('registerForm')"
                type="primary"
                class="submit-btn"
            >注册</el-button>
        </el-form-item>


    </el-form>
</template>

<script>
import { getCurrentInstance, inject } from "vue";
import { useRouter } from 'vue-router';
export default {
    props: {
        registerUser: {
            type: Object,
            required: true,
        },
        registerRules: {
            type: Object,
            required: true,
        }
    },
    setup(props) {
        const { ctx } = getCurrentInstance();
        const axios = inject('axios')
        const router = useRouter();

        const handleRegister = (formName) => {
            ctx.$refs[formName].validate((valid) => {
                if (valid) {
                    const { account, companyName, password, password2 } = props.registerUser;
                    axios.post("/api/applicationCompany/register", {
                        "account": account,
                        "companyName": companyName,
                        "password": password,
                    }, {
                        headers: { 'Content-Type': 'application/json' }
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200) {
                            console.log(res);
                            alert("注册成功!")
                            // 路由跳转
                            location.reload();
                        }
                        else {
                            alert("提交失败！");
                            return false;
                        }
                    })
                } else {
                    alert("提交失败！");
                    return false;
                }
            });
        };

        return { handleRegister };
    }
}
</script>

<style scoped>
.registerForm {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
    width: 100%;
}
</style>